<template>
  <XcDrawer class="comp-nodelogger" ref="drawer" :title="$t('page.app.nodelogger.title')" :width="640" @onDrawerSave="onSave">
    <Row class-name="top">
      <Col span="12">
      <Button v-if="!codemode" type="primary" icon="md-add" @click="addProp">{{$t('button.add')}}</Button>&nbsp;
      </Col>
      <Col span="12" class="right">
      <Switch class="switch" @on-change="changeMode">
        <Icon type="ios-code" size="14" color="#fff" slot="open"></Icon>
        <Icon type="ios-list" size="14" slot="close"></Icon>
      </Switch>
      </Col>
    </Row>
    <Divider />
    <Input v-if="codemode" v-model="proptext" type="textarea" :autosize="{minRows:20}" @on-blur="textChanged" />
    <div v-else>
      <Row :gutter="10" v-for="(prop, index) in changed" class-name="proprow" :key="index">
        <Col span="16">
        <AutoComplete :transfer="true" v-model="prop.key" :data="loggers" :filter-method="filterProp" @on-change="propChanged" @on-select="sk=>{prop.value=(loggers[sk]||'')}" clearable></AutoComplete>
        </Col>
        <Col span="4">
        <Select v-model="prop.value" @on-change="propChanged">
          <Option v-for="item in levels" :value="item" :key="item">{{ item }}</Option>
        </Select>
        </Col>
        <Col span="4" class="right"><Button type="error" long @click="delProp(index)">{{$t('button.delete')}}</Button></Col>
      </Row>
    </div>
  </XcDrawer>
</template>
<script>
  import XcDrawer from '@/components/xcdrawer'
  export default {
    name: "comp-nodelogger",
    components: { XcDrawer },
    data() {
      return {
        codemode: false,
        node: '',
        loggers: [],
        levels: [],
        changed: [],
        proptext: '',
      }
    },
    methods: {
      show(node) {
        this.changed = []
        this.node = node
        this.$refs.drawer.show()
        this.loadLogger()
      },
      loadLogger() {
        this.$md.dispatch('app_node_logger', {
          data: this.node.appname
        }).then(data => {
          this.loggers = data.data || []
          this.levels = data.levels || []
        })
      },
      filterProp(value, option) {
        return option.indexOf(value) !== -1
      },
      changeMode() {
        this.codemode = !this.codemode
      },
      addProp() {
        this.changed.push({
          key: '',
          value: '',
        })
      },
      delProp(index) {
        this.$Modal.confirm({
          title: this.$t('delmodel.title'),
          content: this.$t('delmodel.content'),
          onOk: () => {
            this.changed.splice(index, 1)
          }
        })
      },
      textChanged() {
        let changed = []
        let textarr = this.proptext.split('\n')
        let pv
        for (let i in textarr) {
          if (!textarr[i]) continue
          pv = textarr[i].split('=')
          if (pv.length === 2) {
            changed.push({
              key: pv[0],
              value: pv[1],
            })
          }
        }
        this.changed = changed
      },
      propChanged() {
        let prop
        let proptexts = []
        for (let i in this.changed) {
          prop = this.changed[i]
          if (prop.key) proptexts.push(prop.key, '=', prop.value, '\n')
        }
        this.proptext = proptexts.join('')
      },
      onSave() {
        if (this.changed.length === 0) return
        let changed = this.changed
        let loggers = {}
        let levels = this.levels
        let level
        for (let i in changed) {
          // 去空、转为大写
          level = changed[i].value.trim().toUpperCase()
          if (this.$collect.indexOf(levels, level) === -1) {
            this.$Message.error(this.$t('page.app.nodelogger.levelnomatch'))
            return
          }
          loggers[changed[i].key] = level
        }
        this.$md.dispatch('app_node_logger_change', {
          data: {
            appname: this.node.appname,
            nodeId: this.node.nodeId,
          },
          loggers: JSON.stringify(loggers)
        }).then(() => {
          this.$Message.success(this.$t('submitok'))
          this.$refs.drawer.close(true)
        })
      }
    }
  }
</script>
<style scoped>
  .comp-nodelogger .proprow {
    margin-top: 10px;
  }
</style>
